<template>
	<view class="pages">
		<!-- :backColor="'black'" -->
		<!-- @goBack="goBack" -->
		<!-- :rightImg="'../../static/logo.png'" -->
		<headerMain :headerBg="'#fff'" :headerTitle="'首页'" :titleColor="'#000'" @goNext="goNext" :rightTitle="'动画'"
			:rightColor="'#000'" :heightTop="heightTop" />

		<view class="content">
			<view class="main">
				<!-- 轮播图 -->
				<uni-swiper-dot :info="info" :current="current" mode="false">
					<view class="swiperBox">
						<view class="swiperBox-wrapper" @tap.stop="goPages('/pages/swiper/swiper')">
							<swiper :indicator-dots="true" :autoplay="false" :interval="2500" :duration="1000"
								:circular="true" class="swiperBox-swiper" @change="changeSwiper"
								indicator-color="rgba(255, 255, 255, 0.36)" indicator-active-color="#FFFFFF">
								<swiper-item class="swiperBox-swiper__item" v-for="(item, index) in info" :key="index">
									<image :src="item" mode="widthFix"></image>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</uni-swiper-dot>
			</view>

			<view class="noticeBox">
				<view class="noticeBox-wrapper">
					<!-- 					<view class="noticeBox-list">
						<view class="noticeBox-list__item" v-for="(item,index) in 10" :key="index">
							<image src="@/static/index/icon.png" mode=""></image>
							<view class="title">无聊猿{{ (index+1) }}</view>
						</view>
					</view> -->
					<swiper :indicator-dots="false" :autoplay="true" :interval="2500" :duration="1000" :circular="true"
						class="swiperBox-list" easing-function="'linear'" @change="changeSwiper">
						<swiper-item class="swiperBox-list__item" v-for="(item, index) in 30" :key="index">
							<image src="@/static/index/icon.png" mode=""></image>
							<view class="titleBg">
								<view class="title">华东交大{{ (index+1) }}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="noticeBox-btn">
					<view class="num">入驻<text>89</text>IP</view>
					<view class="see" @tap.stop="uni.navigateTo({
						url: '/pages/drag/drag'
					})">查看拖拽</view>
				</view>
			</view>

			<view class="box">
				<!-- <view class="hotShop">
					<view class="hotShop-item">
						<view class="titleBox">
							<view class="title">爆款商品</view>
							<view class="tips">买！买！买！</view>
						</view>
						<view class="grainBox">
							<view class="grainItem grainItem_1">
								<image class="grain_1" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_2">
								<image class="grain_2" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_3">
								<image class="grain_3" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_4">
								<image class="grain_4" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_5">
								<image class="grain_5" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_6">
								<image class="grain_6" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_7">
								<image class="grain_7" src="@/static/index/grain.png" mode=""></image>
							</view>
						</view>
						<image class="hotBg" src="@/static/index/hotBg.png" mode=""></image>
						<view class="imgBox">
							<image class="monkey" src="@/static/index/monkey.png" mode=""></image>
						</view>
					</view>
				</view> -->

				<!-- <view class="hotShop">
					<view class="hotShop-item">
						<view class="titleBox">
							<view class="title">爆款商品</view>
							<view class="tips">买！买！买！</view>
						</view> -->
				<!-- 珠子掉落 -->
				<!-- <view class="grainBox">
							<view class="grainItem grainItem_1">
								<image class="grain_1" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_2">
								<image class="grain_2" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_3">
								<image class="grain_3" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_4">
								<image class="grain_4" src="@/static/index/grain.png" mode=""></image>
							</view>
							<view class="grainItem grainItem_5">
								<image class="grain_5" src="@/static/index/grain.png" mode=""></image>
							</view>
						</view>
						<image class="hotBg" src="@/static/index/hotBg.png" mode=""></image>
						 --><!-- 猴子 -->
				<!-- <view class="imgBox_1" v-if="show_1 == true">
								<image class="monkey_1" src="@/static/index/monkey.png" mode=""></image>
							</view>
							<view class="imgBox_2" v-if="show_2 == true">
								<image class="monkey_2" src="@/static/index/monkey.png" mode=""></image>
							</view>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="clipPath">
			<view class="clipPath-title">
				css 剪辑路径：
				<br />
				<text @tap.stop="goTo('https://bennettfeely.com/clippy/')">
					Clippy - CSS clip-path maker
				</text>
			</view>
			<view class="clipPath-img">
				<image src="../../static/index/banner.png" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="text-wrapping">
			<image src="../../static/logo.png" mode=""></image>
			这里是文字环绕，文字环绕，文字环绕。通过(css shape-outside属性shape-outside 仅适用于浮动元素)以及 float 浮动属性来实现的。前端不是复制粘贴，前端应该是有趣的、有创造性的，连通用户的桥梁。
		</view>

		<!-- 底部导航 -->
		<tabbar :current="0" />

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				heightTop: 0,
				current: 0,
				info: ['../../static/index/banner.png', '../../static/index/banner.png'],
				isShow: true,
				dataArr: [],
				times: 0,
				num: 1,
				show_1: true,
				show_2: false,
			}
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
		},
		onLoad() {

		},
		onHide() {
			console.log("onHide：", this.times);
			if (this.times) {
				clearInterval(this.times);
				clearTimeout(this.times);
				this.times = null;
			}
		},
		onUnload() {
			console.log("onUnload：", this.times);
			if (this.times) { //在页面卸载时清除定时器有时会清除不了，可在页面跳转时清除
				clearTimeout(this.times);
				this.times = null;
			}
		},
		onShow() {
			this.times = setInterval(() => {
				// console.log("执行");
				if (this.show_1 == true) {
					this.show_1 = false;
					this.show_2 = true;
				} else {
					this.show_1 = true;
					this.show_2 = false;
				}
			}, 1500);
		},
		methods: {
			goPages(url) {
				uni.navigateTo({
					url: url
				})
			},
			goTo(url){
				if(url){
					// #ifdef H5
						// location.href = url;
						window.open(url);
					// #endif
					// #ifdef APP-PLUS
						plus.runtime.openURL(url);
					// #endif
				}
			},
			goNext() {
				uni.navigateTo({
					url: '/pages/animation/animation'
				})
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F2F2F2;
	}

	.content {
		// padding: 50rpx 0;
	}

	.main {
		.swiperBox {
			height: 348rpx;
			padding: 0 30rpx;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			&-wrapper {
				width: 100%;
			}

			&-swiper {
				height: 348rpx;
				border-radius: 30rpx;

				&__item {
					width: 100%;
					height: 348rpx;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 30rpx;

					image {
						width: 100%;
						border-radius: 30rpx;
					}
				}
			}
		}
	}

	.noticeBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		&-wrapper {
			padding: 0 0rpx 0 0;
			width: 75%;
			// overflow: hidden;
		}

		&-list {
			// display: flex;
			// flex-direction: row;
			// justify-content: flex-start;
			// align-items: flex-start;
			// white-space: nowrap;
			// flex-wrap: wrap;
			// animation: marquee 10s linear infinite;
			width: 100%;
			// overflow: auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			flex-wrap: wrap;
			height: 140rpx;
			animation: marquee 10s linear infinite;

			&__item {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #fff;
				border-radius: 10rpx;
				position: relative;
				margin: 10rpx;
				transform: skewX(-10deg);
				width: 200rpx !important;

				image {
					width: 55rpx;
					height: 55rpx;
					margin-right: 10rpx;
					position: absolute;
					left: 5rpx;
					bottom: 0;
					transform: skewX(10deg);
				}

				.title {
					color: #000;
					font-size: 24rpx;
					white-space: nowrap;
					padding: 10rpx 25rpx 10rpx 70rpx;
					transform: skewX(10deg);
				}
			}

			@keyframes marquee {
				0% {
					transform: translateX(-80%);
				}

				100% {
					transform: translateX(100%);
				}
			}

			@-webkit-keyframes marquee {
				0% {
					transform: translateX(-80%);
				}

				100% {
					transform: translateX(100%);
				}
			}
		}

		&-btn {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #f5f5f5;
			width: calc(100% - 75%);
			padding: 40rpx 0rpx 40rpx 0rpx;
			position: relative;
			.num {
				color: #000;
				font-weight: bold;
				font-size: 32rpx;
				white-space: nowrap;

				text {
					color: #FB8D7D;
					font-size: 36rpx;
				}
			}

			.see {
				color: #000;
				font-size: 24rpx;
				border-radius: 6rpx;
				border: 1px solid #000;
				padding: 2rpx 10rpx;
				margin-top: 10rpx;
			}
		}
	}

	.swiperBox {
		&-list {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			flex-wrap: wrap;
			height: 140rpx;

			// animation: marquee 10s linear infinite;
			::v-deep .uni-swiper-slide-frame {
				width: 100% !important;
				height: 140rpx !important;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: flex-end;
				flex-wrap: wrap;
			}

			&__item {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin: 10rpx;
				position: relative !important;
				transform: translate(0%) !important;
				width: 200rpx !important;
				height: auto !important;
				overflow: unset;

				image {
					width: 55rpx;
					height: 55rpx;
					margin-right: 10rpx;
					position: absolute;
					left: 20rpx;
					bottom: 0;
					z-index: 8;
				}

				.titleBg {
					background: #fff;
					border-radius: 10rpx 5rpx 5rpx 10rpx;
					padding: 10rpx 25rpx 10rpx 80rpx;
					transform: skewX(10deg);
				}

				.title {
					color: #000;
					font-size: 24rpx;
					white-space: nowrap;
					transform: skewX(-10deg);
				}
			}

			@keyframes marquee {
				0% {
					transform: translateX(-80%);
				}

				100% {
					transform: translateX(100%);
				}
			}

			@-webkit-keyframes marquee {
				0% {
					transform: translateX(-80%);
				}

				100% {
					transform: translateX(100%);
				}
			}
		}
	}


	.box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;

		.otherBox {
			width: 49.5%;
		}

		.hotShop {
			width: 49.5%;
			position: relative;

			&-item {
				background: linear-gradient(160deg, #F3EBD5 0%, #CEAC7A 78%);
				border-radius: 12rpx;
				padding: 65rpx 0 0 50rpx;
				height: 340rpx;
				overflow: hidden;
				position: relative;

				.titleBox {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;

					.title {
						font-size: 32rpx;
						color: #000;
						font-weight: bold;
					}

					.tips {
						font-size: 28rpx;
						color: #000;
						margin-top: 10rpx;
					}
				}

				.grainBox {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					display: block;
					width: 100%;
					height: 100%;
					overflow: hidden;

					// background: green;
					.grainItem {
						display: block;
						width: 100%;
						height: 110%;
						position: absolute;
						left: 0;
						right: 0;
						top: -50rpx;
						z-index: 8;
					}

					.grainItem_1 {
						margin: auto;
						text-align: center;
						animation: upDwon 1.5s ease-in-out 0s infinite forwards;
					}

					.grain_1 {
						width: 26rpx;
						height: 26rpx;
					}

					.grainItem_2 {
						padding-left: 50rpx;
						animation: upDwon 1.5s ease-in-out 0.2s infinite backwards;
					}

					.grain_2 {
						width: 20rpx;
						height: 20rpx;
					}

					.grainItem_3 {
						margin: auto;
						text-align: center;
						animation: upDwon 1.5s ease-in-out 0.5s infinite backwards;
					}

					.grain_3 {
						width: 20rpx;
						height: 20rpx;
					}

					.grainItem_4 {
						padding-left: 250rpx;
						animation: upDwon 1.5s ease-in-out 0.9s infinite backwards;
					}

					.grain_4 {
						width: 28rpx;
						height: 28rpx;
					}

					.grainItem_5 {
						padding-left: 180rpx;
						animation: upDwon 1.5s linear 1.5s infinite backwards;
					}

					.grain_5 {
						width: 20rpx;
						height: 20rpx;
					}

					.grainItem_6 {
						padding-left: 190rpx;
						animation: upDwon 1.5s linear 2s infinite backwards;
					}

					.grain_6 {
						width: 20rpx;
						height: 20rpx;
					}

					.grainItem_7 {
						padding-left: 20rpx;
						animation: upDwon 1.5s linear 2.5s infinite forwards;
					}

					.grain_7 {
						width: 28rpx;
						height: 28rpx;
					}
				}

				@keyframes upDwon {
					0% {
						transform: translateY(0);
					}

					100% {
						transform: translateY(100%);
					}
				}

				@-webkit-keyframes upDwon {
					0% {
						transform: translateY(0);
					}

					100% {
						transform: translateY(100%);
					}
				}

				.hotBg {
					position: absolute;
					left: 0;
					right: 0;
					bottom: -85rpx;
					margin: auto;
					z-index: 1;
					width: 65%;
					height: 270rpx;
				}

				.imgBox {
					width: 100%;
					height: 50%;
					// background: pink;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 9;

					.monkey {
						position: absolute;
						right: -45rpx;
						bottom: -65rpx;
						width: 175rpx;
						height: 175rpx;
						// animation: LeftMove 1.5s linear 0s infinite forwards,
						// 			rotate 0.1s linear 1.6s infinite none,
						// 			rightMove 1.5s linear 2s infinite forwards;
						animation: LeftMove 1.5s 1 0s forwards,
							rotate 0.1s 1 2.1s none,
							rightMove 1.5s 1 2s forwards;
						// 名称 需要多少秒或毫秒完成 动画将如何完成一个周期  动画在启动前的延迟间隔
						// 播放次数 是否应该轮流反向播放动画
						// animation-name:LeftMove, rotate, rightMove;
						// animation-duration:1.5s, 0.1s, 1.5s;
						// animation-timing-function:linear, linear, linear;
						// animation-delay:0s, 1.6s, 1.8s;
						// animation-fill-mode:forwards, none, forwards;
						// animation-iteration-count:1;
						animation-iteration-count: infinite;
						animation-direction: alternate;
						// -webkit-animation-iteration-count:infinite;
					}

					@keyframes LeftMove {
						from {
							-webkit-transform: translateX(0);
							transform: translateX(0);
						}

						to {
							-webkit-transform: translateX(-130%);
							transform: translateX(-130%);
						}
					}

					@keyframes rotate {
						from {
							transform: translateX(-155%) scaleX(0);
						}

						to {
							transform: translateX(-155%) scaleX(0);
						}
					}

					@keyframes rightMove {
						from {
							-webkit-transform: translateX(-150%) scaleX(-1);
							transform: translateX(-150%) scaleX(-1);
						}

						to {
							-webkit-transform: translateX(-10%) scaleX(-1);
							transform: translateX(-10%) scaleX(-1);
						}
					}
				}


				.imgBox_1 {
					width: 100%;
					height: 50%;
					// background: pink;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 9;

					.monkey_1 {
						position: absolute;
						right: -45rpx;
						bottom: -65rpx;
						width: 175rpx;
						height: 175rpx;
						// 名称  需要多少秒或毫秒完成  动画将如何完成一个周期  
						// 动画在启动前的延迟间隔
						// 播放次数 是否应该轮流反向播放动画
						animation: move 1.5s 1 0s none;
						animation-iteration-count: infinite;
					}

					@keyframes move {
						from {
							-webkit-transform: translateX(0);
							transform: translateX(0);
						}

						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}

					@-webkit-keyframes move {
						from {
							-webkit-transform: translateX(0);
							transform: translateX(0);
						}

						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}
				}

				.imgBox_2 {
					width: 100%;
					height: 50%;
					// background: pink;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 9;
					transform: rotateY(180deg);
					/* 反转方向为负角度45度 */
					transform-origin: 0 100%;

					/* 设置旋转中心为图片的中心点，高度为宽度的一半 */
					.monkey_2 {
						position: absolute;
						left: -130rpx;
						bottom: -65rpx;
						width: 175rpx;
						height: 175rpx;
						// 名称  需要多少秒或毫秒完成  动画将如何完成一个周期  
						// 动画在启动前的延迟间隔
						// 播放次数 是否应该轮流反向播放动画
						animation: move2 1.5s 1 0s none;
						animation-iteration-count: infinite;
					}

					@keyframes move2 {
						from {
							-webkit-transform: translateX(0%);
							transform: translateX(0%);
						}

						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}

					@-webkit-keyframes move2 {
						from {
							-webkit-transform: translateX(0%);
							transform: translateX(0%);
						}

						to {
							-webkit-transform: translateX(-138%);
							transform: translateX(-138%);
						}
					}
				}

			}
		}
	}

	::v-deep .swiper-container-free-mode>.swiper-wrapper {
		-webkit-transition-timing-function: linear;
		/*之前是ease-out*/
		-moz-transition-timing-function: linear;
		-ms-transition-timing-function: linear;
		-o-transition-timing-function: linear;
		transition-timing-function: linear;
		margin: 0 auto;
	}
	
	.clipPath{
		margin: 20rpx 30rpx;
		&-title{
			text-align: center;
			text{
				cursor: pointer;
				color: red;
				// 渐变文本
				background: linear-gradient(to top, red 0%, blue 100%);
				color: transparent;
				-webkit-background-clip: text;
				// 引用符合(无效)
				quotes: "“" "”";
			}
			// 首字母
			&::first-letter {
				font-weight: bold;
				color: #333;
			}
		}
		&-img{
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			// clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.text{
		&-wrapping{
			padding: 20rpx;
			image{
				width: 150rpx;
				height: 150rpx;
				float: left;
				shape-outside: circle(50%);
				// shape-outside: ellipse(50% 25%);
				// shape-image-threshold: 0.7;
				margin-right: 20rpx;
			}
			font-size: 28rpx;
			color: #333;
		}
	}
</style>